<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>职位与成绩查询</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            font-size: 14px;
        }

        .table-wrapper {
            overflow-x: auto;
        }

        .el-table th,
        .el-table td {
            white-space: nowrap;
        }

        .filter-form {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-main>
                <!-- 筛选表单 -->
                <el-form :inline="true" :model="filters" class="filter-form">
                    <el-form-item label="职位代码">
                        <el-input v-model="filters.positionCode" size="small" placeholder="请输入职位代码"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="职位名称">
                        <el-input v-model="filters.positionName" size="small" placeholder="请输入职位名称"></el-input>
                    </el-form-item> -->
                    <el-form-item label="学历">
                        <el-select v-model="filters.education" multiple size="small" placeholder="请选择学历" style="width:180px;">
                            <el-option label="本科" value="本科"></el-option>
                            <el-option label="专科" value="专科"></el-option>
                            <el-option label="高中" value="高中"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="专业">
                        <el-input v-model="filters.major" size="small" placeholder="请输入专业"></el-input>
                    </el-form-item>
                    <el-form-item label="是否党员">
                        <el-select v-model="filters.otherRequirements" size="small" placeholder="请选择" style="width:120px;">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="党员" value="党员"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="submitFilters">提交</el-button>
                        <el-button size="small" @click="resetFilters">重置</el-button>
                    </el-form-item>
                </el-form>
                <div class="table-wrapper">
                    <el-table v-if="tableData.length" :data="tableData" border height="calc(100vh - 190px)" style="width: 100%;">
                        <el-table-column
                            v-for="col in tableColumns"
                            :key="col.key || col"
                            :prop="col.key || col"
                            :label="col.name || col"
                            :fixed="col.fixed || false"
                            :width="col.width || 150"
                        >
                            <template v-slot="scope">
                                <span v-if="(col.key || col) === 'positionCode'" style="color: blue; cursor: pointer;"
                                    @click="openScoreDialog(scope.row[col.key || col])">
                                    {{ scope.row[col.key || col] }}
                                </span>
                                <span v-else>{{ scope.row[col.key || col] }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
        </el-container>

        <!-- 成绩弹框 -->
        <el-dialog title="进面成绩" :visible.sync="scoreDialogVisible" width="90%" top="30px">
            <div class="table-wrapper">
                <el-table v-if="scoreData.length" :data="scoreData" border height="calc(100vh - 160px)" style="width: 100%;">
                    <el-table-column
                        v-for="col in scoreColumns"
                        :key="col.key || col"
                        :prop="col.key || col"
                        :label="col.name || col"
                        :fixed="col.fixed || false"
                        :width="col.width || 120"
                        :min-width="120"
                    >
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                province: '',
                city: '',
                date: '',
                filters: {
                    positionCode: '',
                    positionName: '',
                    education: [],
                    major: '',
                    otherRequirements: ''
                },
                tableData: [],
                tableColumns: [],
                scoreData: [],
                scoreColumns: [],
                scoreDialogVisible: false
            },
            created() {
                const params = new URLSearchParams(window.location.search);
                this.province = params.get("province") || "安徽省";
                this.city = params.get("city") || "合肥市";
                this.date = params.get("date") || "2025";
                const savedFilters = localStorage.getItem('positionFilters');
                if (savedFilters) {
                    this.filters = JSON.parse(savedFilters);
                }
                this.fetchPositions();
            },
            methods: {
                async fetchPositions() {
                    try {
                        const params = new URLSearchParams();
                        params.append('province', this.province);
                        params.append('city', this.city);
                        params.append('date', this.date);

                        if (this.filters.positionCode) params.append('positionCode', this.filters.positionCode);
                        if (this.filters.positionName) params.append('positionName', this.filters.positionName);
                        if (this.filters.education.length) params.append('education', this.filters.education.join(','));
                        if (this.filters.major) params.append('major', this.filters.major);
                        if (this.filters.otherRequirements) params.append('otherRequirements', this.filters.otherRequirements);

                        const url = `http://localhost:3000/api/files/parse?${params.toString()}`;
                        const res = await fetch(url).then(r => r.json());
                        this.tableData = res.data || [];
                        this.tableColumns = res.positionNameKeyMap || [];
                    } catch (e) {
                        this.$message.error("获取职位数据失败");
                    }
                },
                submitFilters() {
                    localStorage.setItem('positionFilters', JSON.stringify(this.filters));
                    this.fetchPositions();
                },
                resetFilters() {
                    this.filters = {
                        positionCode: '',
                        positionName: '',
                        education: [],
                        major: '',
                        otherRequirements: ''
                    };
                    this.fetchPositions();
                },
                async openScoreDialog(positionCode) {
                    try {
                        const params = new URLSearchParams();
                        params.append('province', this.province);
                        params.append('city', this.city);
                        params.append('date', this.date);
                        params.append('positionCode', positionCode);

                        const url = `http://localhost:3000/api/files/parseScore?${params.toString()}`;
                        const res = await fetch(url).then(r => r.json());
                        this.scoreData = res.data || [];
                        this.scoreColumns = res.fractionNameKeyMap || []
                        this.scoreDialogVisible = true;
                    } catch (e) {
                        this.$message.error("获取成绩数据失败");
                    }
                }
            }
        });
    </script>
</body>

</html>
